<template>
  <div class="product-list">
    <div class="info-box" @click="detail">
      <div class="product-title">
        <span class="title-name">
          <el-tooltip :content="title" placement="bottom" effect="light">
            <span>{{ title }}</span>
          </el-tooltip>

          <span v-if="isHot" class="hot-text">HOT</span>
        </span>
        <span class="title-depict">{{ titleDepict }}</span>
      </div>
      <div class="product-percentage">
        <span class="percentage-name">{{ profit }}</span>
        <span class="percentage-depict">{{ profitDepict }}</span>
      </div>
      <div class="product-percentage">
        <span class="percentage-name">{{ buyingPrice }}</span>
        <span class="percentage-depict">{{ buyingPriceDepict }}</span>
      </div>
    </div>
    <div class="purchase-btn">
      <span>立即购买</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "product-list",
  props: {
    title: {
      type: String,
      default: ""
    },
    titleDepict: {
      type: String,
      default: "1万起购 | 大众客户 | 低风险"
    },
    profit: {
      type: String,
      default: ""
    },
    profitDepict: {
      type: String,
      default: "参考年化净收益"
    },
    buyingPrice: {
      type: String,
      default: "1万元/1000元"
    },
    buyingPriceDepict: {
      type: String,
      default: "起购金额"
    },
    isHot: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    detail() {
      this.$emit("detail");
    }
  }
};
</script>

<style scoped lang="stylus">
.product-list
  height auto
  display flex
  overflow hidden
  border-bottom: 1px solid #acacac

  .info-box
    display flex
    width 80%
    justify-content space-between
    &:hover
      cursor pointer
    .product-title
      width 58%
      height 100%
      overflow hidden
      padding-top 12px
      padding-left 16px
    .product-percentage, .product-amount
      width 20%
      height 100%
      padding-top 12px

    .product-title > span
      display block

    .product-title
      .title-name
        display flex
        overflow hidden
        align-items center
        width 90%
        span:nth-child(1)
          white-space nowrap
          line-height 30px
          height 30px
          overflow hidden
          font-size 16px
          font-weight bold
        .hot-text
          display block
          background-color coral
          border 0px
          border-radius 2px
          font-size 8px
          margin-left 15px
          height 16px
          line-height 16px
          padding 0px 2px
          color #fff
      .title-depict
        font-size 14px
        color darkgray
    .product-percentage > span
      display block
    .product-percentage
      .percentage-name
        line-height 30px
        font-size 16px
        color #d43a47
        font-weight bold
      .percentage-depict
        font-size 14px
        color darkgray

  .purchase-btn
    width 20%
    span
      display block
      width 100px
      color #fff
      height 34px
      line-height 34px
      text-align center
      margin 23px auto
      background-color #06469e
      &:hover
        cursor pointer
</style>
